<template>
	<view class="myhosecardbox">
		<view class="top">
			<view class="l">{{gettime(new Date(data.updatedAt).getTime())}}</view>
			<view class="r" :class="{hsacolor:prop.data.ishas==1}">{{mytype}}</view>
		</view>
		<view class="center">
			<view class="l">
				<image :src="ip+'/'+data.img" mode="aspectFill"></image>
			</view>
			<view class="r">
				<view class="t">{{type}} | {{data.context}}</view>
				<view class="c">{{data.sum}}室·{{data.erea}}m^2·{{data.title}}</view>
				<view class="b">{{data.price * 30}} <text class="yue">元/月</text></view>
			</view>
		</view>
		<view class="buttom">
			<template v-if="prop.data.ishas==1">
				<view class="" @click="hosedown">立即下架</view>
				<view class="hisborcolor" @click="isok">确定已出租</view>
			</template>
			<view v-if="prop.data.ishas==3" class="" @click="hoseup">重新上架</view>
			<view v-if="prop.data.ishas==2" class="" @click="hoseup">重新出租</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ip
	} from '../../utils/getinfo';
	import {
		ref,
		computed
	} from 'vue'
	import gettime from '@/utils/gettime.js'
	import {
		getokhosee,
		gethosedown,
		gethoseup
	} from '@/api/index.js'
	const emit = defineEmits(['cxdata'])
	const prop = defineProps(['data'])
	const isok = async () => {
		uni.showModal({
			title: "提示",
			content: "确定已出租？",
			success(e) {
				if (e.confirm) {
					const ok = async () => {
						const rudata = await getokhosee(prop.data.id)
						if (rudata.code == 200) {
							uni.showToast({
								title: "出租完成!",
								icon: "none"
							})
							emit('cxdata', {
								id: prop.data.id,
								staus: 2
							})
						}
					}
					ok()
				}
			}
		})

	}
	const hoseup = async () => {
		uni.showModal({
			title: "提示",
			content: "确定重新上架？",
			success(e) {
				if (e.confirm) {
					const ok = async () => {
						const rudata = await gethoseup(prop.data.id)
						if (rudata.code == 200) {
							uni.showToast({
								title: "已上架!",
								icon: "none",
							})
							emit('cxdata', {
								id: prop.data.id,
								staus: 1
							})
						}
					}
					ok()
				}
			}
		})
		
	}
	const hosedown = async () => {
		uni.showModal({
			title: "提示",
			content: "确定要下架？",
			success(e) {
				if (e.confirm) {
					const ok = async () => {
						const rudata = await gethosedown(prop.data.id)
						if (rudata.code == 200) {
							uni.showToast({
								title: "已下架!",
								icon: "none"
							})
							emit('cxdata', {
								id: prop.data.id,
								staus: 3
							})
						}
					}
					ok()
				}
			}
		})

	}
	const type = computed(() => {
		if (prop.data) {
			if (prop.data.type == '0') return "整租"
			if (prop.data.type == '1') return "合租/单间"
			if (prop.data.type == '2') return "公寓"
			if (prop.data.type == '3') return "短租"
		}

	})
	const mytype = computed(() => {
		const index = prop.data.ishas
		if (index == 1) return "未出租"
		if (index == 2) return "已出租"
		if (index == 3) return "已下架"
	})
</script>

<style lang="scss" scoped>
	.myhosecardbox {
		height: 100%;
		width: 100%;
		padding: 0 15rpx;

		.top {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 25rpx;
			height: 80rpx;
			padding: 0 10rpx;
			border-bottom: 1rpx solid #eee;

			.l {
				font-size: 24rpx;
				font-weight: 700;
			}

			.r {
				color: #7b7b7b;
			}

			.hsacolor {
				color: royalblue;
			}
		}

		.center {
			height: calc(100% - 160rpx);
			display: flex;
			align-items: center;

			.l {
				height: 200rpx;
				width: 200rpx;
				margin-right: 20rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					height: 165rpx;
					width: 165rpx;
					border-radius: 14rpx;
				}
			}

			.r {
				height: 165rpx;
				display: flex;
				flex-direction: column;
				overflow: hidden;
				width: 500rpx;

				>view {
					flex: 1;
					line-height: 55rpx;
				}

				.t {
					font-size: 30rpx;
					font-weight: 700;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.c {
					font-size: 22rpx;
					color: #7b7b7b;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.b {
					font-size: 30rpx;
					color: #ff9900;
					font-weight: 700;
					display: flex;
					align-items: center;

					text {
						font-size: 20rpx;
						margin-bottom: -5rpx;
					}
				}
			}
		}

		.buttom {
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			gap: 25rpx;

			.hisborcolor {
				color: #ff9900;
				border-color: #ff9900;
			}

			>view {
				width: 160rpx;
				height: 55rpx;
				border-radius: 30rpx;
				border: 1rpx solid #7b7b7b;
				font-size: 24rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
</style>